<template>
  <n-modal v-model:show="isVisible" title="编辑客户信息" preset="dialog" @close="onClose" @update:show="onClose" style="height: 400px;width: 400px">
    <n-form @submit.prevent="handleSubmit" label-width="120px" class="form-container">
      <div class="form-row" style="margin-top: 20px">
        <n-form-item label="用户名：" path="categoryId">
          <n-input v-model:value="form.username"
                   placeholder="请输入用户名"
          ></n-input>
        </n-form-item>
        <n-form-item style="margin-left: 10px" label="姓名">
          <n-input v-model:value="form.name"
                   placeholder="请输入姓名"
          />
        </n-form-item>
      </div>
      <div class="form-row">
        <n-form-item label="电话："  >
          <n-input v-model:value="form.phone" placeholder="请输入电话"/>
        </n-form-item>
          <n-form-item label="国家：" style="margin-left: 10px">
              <n-select v-model:value="form.nation"
                        :options="nationOption"
                        style="width: 185px;"
              ></n-select>
          </n-form-item>
      </div>
        <div class="form-row">
            <n-form-item label="地址：">
                <n-input v-model:value="form.address" placeholder="请输入地址" style="width: 450px;"/>
            </n-form-item>
        </div>

      <!-- 提交按钮 -->
      <div class="submit-row">
        <n-form-item>
          <n-button type="primary" native-type="submit" @click="handleSubmit">提交</n-button>
        </n-form-item>
      </div>
    </n-form>
  </n-modal>
</template>

<script setup>
  import {ref, watch} from 'vue';
  import {useUserStore} from "@/store/index.js";
  import api from '@/api/admin.js'
  import {List} from "echarts";
  const nationOption = [
	  {
			label: "中国",
      value: "中国"
    },
	  {
		  label: "美国",
		  value: "美国"
	  },
	  {
		  label: "英国",
		  value: "英国"
	  },
	  {
		  label: "意大利",
		  value: "意大利"
	  },
	  {
		  label: "法国",
		  value: "法国"
	  },
	  {
		  label: "巴西",
		  value: "巴西"
	  },
  ]
  const userStore = useUserStore()
  const id = userStore.getId();
  const option = ref([
  ])
  const emit = defineEmits(['updatePage'])
  const props = defineProps({
    show1: {
      type: Boolean,
      required: true,
    },
    onClose: {
      type: Function,
      required: true,
    },
    option: {
      type: List,
      require: true
    },
    customer: {
      type: Object,
      required: true,
    }
  });

  const isVisible = ref(props.show1);
  watch(() => props.show1, (newVal) => {
    isVisible.value = newVal;
    if (newVal) {
      // 当对话框显示时，将传递过来的属性值填充到表单中
      form.value = { ...props.customer };
    }
  });

  const form = ref({
    username:'',
    name:'',
    phone:'',
    address:'',
    nation: ''
  });

  const handleSubmit = async () => {
    try {
      const res = await api.updateCustomer(form.value);  // 调用更新接口
      if (res.code === 200) {
        emit("updatePage");
      } else {
        $message.error(res.message);
      }
    } catch (err) {
      $message.error("更新失败！");
    } finally {
      clear();
      props.onClose();
    }
  };
  const clear = () => {
    form.value.username="",
      form.value.name = ""
    form.value.phone=""
    form.value.address=""
  }
</script>

<style scoped>
    .form-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        position: relative;
    }

    .form-row {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .form-row > n-form-item {
        flex: 1;
    }

    .submit-row {
        justify-content: center;
        display: flex;
        width: 100%;
    }
</style>
